import React from "react"
import "./input.scss"
import { images } from "../../assets"

interface IInputProps {
  leftIcon?: string // 左边icon
  isOpenClear?: boolean // 是否开启右边清除按钮
  isMsgInput?: boolean // 是否验证码输入框
  msgCodeText?: string // 验证码按钮文字
  msgTextStyle?: object // 验证码文本样式
  msgButtonStyle?: object // 验证码按钮样式
  type?: string
  onChange?: (e: any) => void // 当文本框内容变化时调用此回调函数
  onBlur?: () => void // 当文本框失去焦点的时候调用此回调函数。
  placeholder?: string // placeholder
  maxLength?: number
  style?: any
  clear?: () => void // 清除操作
  isPassword?: boolean // 是否出现密码显示与隐藏
  isPasswordOpen?: boolean // 密码显示与隐藏状态
  changePasswordStyle?: () => void // 修改密码与隐藏
  value?: string // 值
  isMobile?: boolean // 是否手机号码
  mobileCodeChange?: (e: any) => void // 修改手机区号
  mobileCode?: string // 区号
  sendMsg?: () => void // 发送验证码
}

export class Input extends React.Component<IInputProps, {}> {
  render() {
    const {
      leftIcon,
      type,
      onChange,
      onBlur,
      placeholder,
      maxLength,
      style,
      isOpenClear,
      clear,
      isPassword,
      isPasswordOpen,
      changePasswordStyle,
      isMsgInput,
      msgCodeText,
      value,
      isMobile,
      mobileCodeChange,
      mobileCode,
      sendMsg
    } = this.props

    return (
      <div className="input-form">
        <img alt="" className="left-icon icon-style" src={leftIcon} />
        {isMobile ? (
          <div className="mobile-code" onClick={mobileCodeChange}>
            <span className="code">{mobileCode}</span>
            <img alt="" className="page-return-arrow" src={images.login.icons.pageReturnArrow} />
          </div>
        ) : null}
        <input
          value={value}
          style={style}
          type={type}
          className={`input-content ${isMobile ? "mobile-content" : null}`}
          onChange={onChange}
          onBlur={onBlur}
          placeholder={placeholder}
          maxLength={maxLength}
        />
        {isOpenClear ? (
          <img alt="" className="icon-style" src={images.login.icons.clear} onClick={clear} />
        ) : null}
        {isPassword ? (
          isPasswordOpen ? (
            <img
              alt=""
              className="icon-style ml4"
              src={images.login.icons.passwordEyeOpen}
              onClick={changePasswordStyle}
            />
          ) : (
            <img
              alt=""
              className="icon-style ml4"
              src={images.login.icons.passwordEyeClose}
              onClick={changePasswordStyle}
            />
          )
        ) : null}
        {isMsgInput ? (
          <div className="code-msg" onClick={sendMsg}>
            {msgCodeText}
          </div>
        ) : null}
      </div>
    )
  }
}
